<template>
  <input v-model="inputText" type="text" />
  <!-- 单行文本框 -->

  <hr />
  <textarea v-model="message"></textarea>
  <!-- 多行文本框 -->

  <hr />
  <input v-model="open" type="checkbox" /> 灯
  <!-- 默认情况下，复选框的值：true/false -->

  <hr />
  <!-- 自定义复选框值： true-value/false-value -->
  <input v-model="determine" false-value="不确定" true-value="确定" type="checkbox" /> 是否确定

  <hr />
  <input v-model="likes" type="checkbox" value="LQ" /> 篮球
  <input v-model="likes" type="checkbox" value="ZQ" /> 足球
  <input v-model="likes" type="checkbox" value="YMQ" /> 羽毛球
  <input v-model="likes" type="checkbox" value="PPQ" /> 乒乓球

  <hr />
  <input v-model="sex" type="radio" value="man" /> 男
  <input v-model="sex" type="radio" value="woman" /> 女

  <hr />
  证书等级：
  <select v-model="level">
    <option value="C">初级</option>
    <option value="B">中级</option>
    <option value="A">高级</option>
  </select>

  <hr />
  去过的城市：
  <select v-model="city" multiple>
    <option value="苏A">南京</option>
    <option value="苏B">无锡</option>
    <option value="苏C">徐州</option>
    <option value="苏D">常州</option>
  </select>
</template>

<script setup>
//选项式
import { ref } from 'vue'

let inputText = ref('ABC') // 单行文本框
let message = ref('本次更新有以下几点：……') // 多行文本框
let open = ref(true) // 开灯（复选框）
let determine = ref('不确定') // 是否确定（复选框）
let likes = ref(['YMQ']) // 兴趣爱好（复选框）
let sex = ref('woman') // 性别（单选按钮）
let level = ref('B') //  // 证书等级（单选下拉框）
let city = ref(['苏C', '苏B']) // 去过的城市（多选下拉框）
</script>

<script>
//组合式
export default {
  data: () => ({
    inputText: 'ABC', // 单行文本框
    message: '本次更新有以下几点：……', // 多行文本框
    open: true, // 开灯（复选框）
    determine: '不确定', // 是否确定（复选框）
    likes: ['YMQ'], // 兴趣爱好（复选框）
    sex: 'woman', // 性别（单选按钮）
    level: 'B', // 证书等级（单选下拉框）
    city: ['苏C', '苏B'], // 去过的城市（多选下拉框）
  }),
}
</script>
